<template>
  <div class="card-container flex-column h-100P">
    <div class="title">{{ title }}</div>
    <div class="flex-sub">
      <el-table height="98%" header-cell-class-name="table-header-cell" :data="tableData">
        <template v-for="(column, i) in tableSet.columns">
          <el-table-column :key="i" align="left" :label="column.label" :prop="column.prop" />
        </template>
        <el-table-column
          v-if="tableSet.actionBar"
          label="操作"
          fixed="right"
          align="center"
          :width="handleScreenWidthToVw(130)+'px'"
        >
          <slot slot-scope="scope" name="actionBar" :data="scope.row">
            <span class="btn-edit" @click.stop="_handleUpdateCilck(scope.row)">修改</span>
            <span class="lh">|</span>
            <span class="btn-delete" @click.stop="_handleDeleteCilck(scope.row)">删除</span>
          </slot>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="page.total"
      :page-size="page.pageSize"
      @current-change="_handleCurrentPage"
    />
  </div>
</template>

<script>
import { handleScreenWidthToVw, handleScreenHeightToVh } from '@/utils/tools'
const defaultSet = {
  columns: [{ label: '演示栏1', prop: '' }], // 表格头设定
  tableData: [], // 表格数据导入
  actionBar: true, // 操作栏显示
}
export default {
  props: {
    title: {
      type: String,
      default: '表格卡片',
    },
    tableSet: {
      type: Object,
      default: defaultSet,
    },
    page: {
      type: Object,
      default() {
        return {
          total: null,
          pageSize: 3,
          pageNo: 1,
        }
      },
    },
  },
  data() {
    return {}
  },
  watch: {
    tableSet: {
      handler(newval) {
        if (newval.tableData.length === 0 && this.page.pageNo !== 1) {
          this.$emit('pageChange', this.page.pageNo - 1)
        }
        // console.log(this.tableSet.tableData)
      },
      deep: true,
    },
  },
  computed: {
    tableData() {
      // console.log(this.tableSet.tableData)
      return this.tableSet.tableData
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    handleScreenHeightToVh() {
      return handleScreenHeightToVh
    },
  },
  methods: {
    _handleDeleteCilck(row) {
      this.$emit('deleteCilck', row)
    },
    _handleUpdateCilck(row) {
      this.$emit('updateCilck', row)
    },
    _handleCurrentPage(pageNo) {
      this.$emit('pageChange', pageNo)
    },
    getPage() {
      return this.page
    },
  },
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: vh(20px) vw(20px);
  border: 1px solid #999;
  border-radius: 5px;

  .title {
    margin-bottom: vh(20px);
    font-size: vw(18px);
    font-weight: 500;
    color: #333;
  }
}

.btn-edit {
  margin-right: vw(10px);
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  margin-left: vw(10px);
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
.lh {
  line-height: 23px;
}
::v-deep {
  .el-table__fixed-right::before {
    background-color: transparent;
  }
  .el-table {
    color: #999;
  }
  .el-table thead {
    color: #333;
  }
  .el-table td,
  .el-table th {
    padding-left: vw(10px);
  }
}
</style>
